<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
        .ancestors *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
        </style>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
        </script>
        
        <script>
          $(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});
        </script>
    </head>
    <body>
        <div class="ancestors">
            <div style="width:500px;">div (曾祖父元素)
              <ul>ul (祖父元素)  
                <li>li (父元素)
                  <span>span</span>
                </li>
              </ul>   
            </div>
          
            <div style="width:500px;">div (祖父元素)   
              <p>p (父元素)
                  <span>span</span>
                </p> 
            </div>
          </div>

    </body>
</html>